<template>
  <div class="zhicai-mall">
    <div class="zhicai-title">
      <p class="zhicai-text">直采商城</p>
    </div>
    <div class="zhicai-main">
      <div class="zhicai-data">
        <div class="data-item">
          <div class="icon"></div>
          <div class="data-box">
            <count-to
              class="data-number"
              :startVal="0"
              :decimals="2"
              :endVal="amount"
              :duration="1000"
            ></count-to>
            <p class="data-title">累计交易额(万元)</p>
          </div>
        </div>
        <div class="data-item">
          <div class="icon2"></div>
          <div class="data-box">
            <count-to
              class="data-number"
              :startVal="0"
              :endVal="order"
              :duration="1000"
            ></count-to>
            <p class="data-title">总订单数(笔)</p>
          </div>
        </div>
        <div class="data-item">
          <div class="icon3"></div>
          <div class="data-box">
            <count-to
              class="data-number"
              :startVal="0"
              :endVal="goods"
              :duration="1000"
            ></count-to>
            <p class="data-title">商品总数(个)</p>
          </div>
        </div>
      </div>
      <div class="zhicai-chart">
        <Echart
          id="zhicai-chart"
          :options="option"
          height="196px"
          width="545px"
        />
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import Echart from "@/components/echart/index.vue";
import CountTo from "@/components/vueCountTo/vue-countTo.vue";
import { ajax } from "@/store/service";
import { dataGroup } from "@/utils";
import opt from "./option";

const option = ref({ ...opt });
const amount = ref(0);
const order = ref(0);
const goods = ref(0);

const init = async () => {
  const [res] = await ajax.zhicai();
  amount.value = res.amount;
  order.value = res.order;
  goods.value = res.goods;
  const chart = dataGroup(res.chart);
  option.value.xAxis[0].data = chart.x;
  option.value.series[0].data = chart.y;
};

onMounted(() => {
  init();
});
</script>


<style scoped lang='scss'>
.zhicai-mall {
  color: #fff;
  height: 279px;
  margin-top: 34px;
  .zhicai-title {
    height: 68px;
    background-image: url("@/assets/bigscreen2/商城小标题.svg");
    padding-top: 30px;
    box-sizing: border-box;
    .zhicai-text {
      margin-left: 37px;
      font-size: 22px;
      font-family: JLinXin;
      font-weight: 600;
      line-height: 22px;
      background: #fffde8 linear-gradient(180deg, #e8feff 40%, #00a9ff 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
  }

  .zhicai-main {
    margin-top: 32px;
    display: flex;
    justify-content: space-between;

    .zhicai-data {
      width: 232px;
      height: 196px;
      margin-left: 30px;
      display: flex;
      justify-content: space-between;
      flex-direction: column;
      .data-item {
        display: flex;
        align-items: center;
        .icon {
          width: 46px;
          height: 46px;
          background-image: url("@/assets/bigscreen2/累计交易额(元).png");
        }
        .icon2 {
          width: 46px;
          height: 46px;
          background-image: url("@/assets/bigscreen2/本月交易额(元).png");
        }
        .icon3 {
          width: 46px;
          height: 46px;
          background-image: url("@/assets/bigscreen2/本月交易额(元)(1).png");
        }
        .data-box {
          margin-left: 21px;
          color: #fff;
          .data-title {
            font-size: 16px;
            font-family: SourceHanSansCN-Medium, SourceHanSansCN;
            font-weight: 500;
            color: #ffffff;
            line-height: 24px;
            opacity: 0.8;
          }
          .data-number {
            display: block;
            font-size: 24px;
            font-family: D-DIN-PRO-Heavy, D-DIN-PRO;
            font-weight: 800;
            color: #ffffff;
            line-height: 24px;
            margin-bottom: 2px;
          }
        }
      }
    }
    .zhicai-chart {
      width: 545px;
      height: 196px;
      display: flex;
      color: #fff;
    }
  }
}
</style>